<template>
  <div>
    <a-row>
      <a-col :offset="6" :span="8">
        <a-card title="新增商品">
          <a-form v-bind="layout">
            <a-form-item label="名称" required="true" v-bind="validateInfos.name">
              <a-input v-model:value="addProductData.name" />
            </a-form-item>
            <a-form-item label="选择分类" required="true" v-bind="validateInfos.categoryId">
              <category-selection
                ref="csRef"
                :value="addProductData.categoryId"
                @categorySelected="doCategorySelected"
              />
            </a-form-item>

            <a-form-item label="选择品牌" v-bind="validateInfos.brandId">
              <brand-selection ref="bsRef" @brandSelected="doBrandSelected" />
            </a-form-item>

            <a-form-item label="选择主单位" v-bind="validateInfos.unitId">
              <unit-selection ref="usRef" @unitSelected="doUnitSelected" />
            </a-form-item>

            <a-form-item label="描述" v-bind="validateInfos.description">
              <a-input v-model:value="addProductData.description" />
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 14, offset: 8 }">
              <a-button type="primary" @click="add">确定</a-button>
              <a-button style="margin-left: 30px" @click="resetFields">重置</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { useHttpRequest } from '@/api/chunfeng/apiRequest'

import CategorySelection from '@/components/chunfeng/category/CategorySelection.vue'

import { useProductApi } from '@/api/chunfeng/product'
import { AddProductData } from '@/api/chunfeng/product/interfaces'
import BrandSelection from '@/components/chunfeng/brand/BrandSelection.vue'
import UnitSelection from '@/components/chunfeng/unit/UnitSelection.vue'

import { Form } from 'ant-design-vue'

export default defineComponent({
  name: 'ProductAdd',
  components: { UnitSelection, BrandSelection, CategorySelection },
  setup() {
    const { executeCommandRequest } = useHttpRequest()
    const csRef = ref()
    const bsRef = ref()
    const usRef = ref()

    const { addProduct } = useProductApi()

    const addProductData = reactive<AddProductData>({
      name: '',
      categoryId: '',
      brandId: '',
      unitId: '',
      description: undefined,
    })
    const rules = reactive({
      name: [
        {
          required: true,
          message: '请输入商品名称',
        },
      ],
      categoryId: [
        {
          required: true,
          message: '请选择商品分类',
        },
      ],
      brandId: [
        {
          required: true,
          message: '请选择品牌',
        },
      ],
      unitId: [
        {
          required: true,
          message: '请选择主单位',
        },
      ],
      description: [
        {
          required: false,
        },
      ],
    })

    const { resetFields, validate, validateInfos } = Form.useForm(addProductData, rules)
    const layout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 14 },
    }

    function add() {
      try {
        validate<AddProductData>().then((data) => {
          console.log(`valid data: ${data}`)
          executeCommandRequest(addProduct(data), {
            message: '添加商品成功',
            callback: () => {
              resetFields()
              csRef.value.reset()
              bsRef.value.reset()
              usRef.value.reset()
            },
          })
        })
      } catch (e) {
        console.log(`catch error:[${e}]`)
      }
    }

    function doCategorySelected(categoryId: string) {
      addProductData.categoryId = categoryId
    }

    function doBrandSelected(brandId: string) {
      addProductData.brandId = brandId
    }

    function doUnitSelected(unitId: string) {
      addProductData.unitId = unitId
    }

    return {
      addProductData,
      validateInfos,
      layout,
      add,
      resetFields,
      doCategorySelected,
      doBrandSelected,
      csRef,
      bsRef,
      usRef,
      doUnitSelected,
    }
  },
})
</script>
